<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="70px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="用户名：">
                <el-input placeholder="用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="手机号：">
                <el-input placeholder="手机号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="邮箱：">
                <el-input placeholder="邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="账号：">
                <el-input placeholder="账号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="用户ID：">
                <el-input placeholder="用户ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="用户ID：">
                <el-input placeholder="用户ID"></el-input>
              </el-form-item>
            </el-col>

            <el-row
              :xs="24"
              :sm="12"
              :lg="6"
              style="float: right; margin-right: 10px"
            >
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <div slot="bottom">
        <el-button type="primary" plain @click="showDialog('add')"
          >新增用户</el-button
        >
      </div>
    </table-bar>

    <tao-table :data="userList" :showPage="true" ref="table" v-bind:page="page">
      <!-- <el-table-column label="头像" prop="avatar" v-if="columns[0].show">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar" />
        </template>
      </el-table-column> -->
      <el-table-column label="用户名" prop="username" v-if="columns[0].show" />
      <el-table-column
        label="所属角色"
        prop="role_str"
        v-if="columns[1].show"
      />
      <el-table-column label="手机号" prop="mobile" v-if="columns[2].show" />
      <el-table-column label="邮箱" prop="email" v-if="columns[3].show" />
      <!-- <el-table-column label="性别" prop="sex" v-if="columns[4].show">
        <template slot-scope="scope">
          {{ scope.row.sex === 1 ? "男" : "女" }}
        </template>
      </el-table-column> -->
      <el-table-column label="状态" prop="status" v-if="columns[4].show">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            :type="scope.row.status === 1 ? 'success' : 'danger'"
          >
            {{ scope.row.status === 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        prop="add_time"
        v-if="columns[5].show"
      />
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showDialog('edit')"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            style="color: #fa6962"
            icon="el-icon-delete"
            @click="deleteUser(scope)"
          >
            注销
          </el-button>
        </template>
      </el-table-column>
    </tao-table>

    <el-dialog :title="dialogTitle" width="500px" :visible.sync="dvEdit">
      <el-form ref="form" :model="form" :rules="rules" label-width="60px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repassword">
          <el-input type="password" v-model="form.repassword"></el-input>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-checkbox-group v-model="form.role_ids">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dvEdit = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAdminList,
  editAdmin,
  deleteAdmin,
  modifyAdmin,
} from "@/api/accountApi.js";
import { getAllRole } from "@/api/roleApi.js";
export default {
  data() {
    return {
      dvEdit: false,
      dialogTitle: "",
      form: {
        username: "",
        password: "",
        repassword: "",
        mobile: "",
        email: "",
        role_ids: "",
      },
      value: "",
      userList: [],
      rules: {
        name: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          //{ min: 3, max: 64, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      page: {
        total: 0,
        page: 1,
        pagesize: 15,
      },
      columns: [
        { name: "用户名", show: true },
        { name: "所属角色", show: true },
        { name: "手机号", show: true },
        { name: "邮箱", show: true },
        { name: "状态", show: true },
        { name: "创建日期", show: true },
      ],
    };
  },
  created() {
    getAdminList(this.page).then((res) => {
      console.log('BBBBBBBB',res)
      if(res.code==0){
        this.userList=res.data.data;
        this.page.total=res.data.count;
      }

    });
  },
  methods: {
    showDialog(type) {
      this.dvEdit = true;
      this.dialogTitle = type === "add" ? "新增用户" : "编辑用户";
    },
    onSubmit() {
      this.dvEdit = false;
    },
    deleteUser(scope) {
      this.$confirm("您确定要注销当前用户吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.userList.splice(scope.$index, 1);
        })
        .catch(() => {});
    },
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
</style>
